<template>
  <p>App</p>
  <A />
</template>

<script>
import { defineAsyncComponent } from "vue";
import ErrorComponent from "./components/ErrorComponent.vue";
import LoadingComponent from "./components/LoadingComponent.vue";

// 不带选项的异步组件
// const A = defineAsyncComponent(() => import("./components/A.vue"));

// 带选项的异步组件
const A = defineAsyncComponent({
  loader: () => import("./components/A.vue"), // 加载成功的组件
  delay: 200, // 延迟时间：延迟多久加载
  timeout: 3000, // 超时时间：超过这个时间就不加载了
  errorComponent: ErrorComponent, // 加载失败的组件
  loadingComponent: LoadingComponent, // 加载中的组件
});

export default {
  name: "App",
  components: {
    A,
  },
};
</script>

<style scoped>
</style>
